﻿

<div id="app">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="商品名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="商品分类" prop="tId">
            <el-select v-model="ruleForm.tId" placeholder="请选择活动区域">
                <el-option v-for="item in types"
                           :key="item.tId"
                           :label="item.name"
                           :value="item.tId">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="活动时间" required>
            <el-col :span="11">
                <el-form-item prop="date1">
                    <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
                </el-form-item>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
                <el-form-item prop="date2">
                    <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
                </el-form-item>
            </el-col>
        </el-form-item>
        <el-form-item label="即时配送" prop="delivery">
            <el-switch v-model="ruleForm.delivery"></el-switch>
        </el-form-item>
        <el-form-item label="活动性质" prop="type">
            <el-checkbox-group v-model="ruleForm.type">
                <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                <el-checkbox label="地推活动" name="type"></el-checkbox>
                <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <el-form-item label="特殊资源" prop="resource">
            <el-radio-group v-model="ruleForm.resource">
                <el-radio label="线上品牌商赞助"></el-radio>
                <el-radio label="线下场地免费"></el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="活动形式" prop="desc">
            <el-input type="textarea" v-model="ruleForm.desc"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" v-on:click="submitForm('ruleForm')">立即创建</el-button>
            <el-button v-on:click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
    </el-form>
</div>


<script>
    var vm = new Vue({
        el: "#app",
        data() {
            return {
                ruleForm: {
                    pId: 0,
                    name: "",
                    price: 0,
                    picUrl: "",
                    status: 1,
                    tId: 0
                },

                types:[],  //下拉的数据

            }
        },
        mounted() {
            this.show(); //加载
            this.bind(); //加载下拉
        },
        methods: {
            show() {  //返填
                console.log("返填数据");

                axios({
                    url: 'https://localhost:5001/api/Product/Fan',
                    method: 'get',
                    params: {
                        id: @ViewBag.Id,
                    }
                }).then((res) => {
                    //也可以从console.log里面去赋值
                    console.log(res.data);

                    this.tableData = res.data.data;  //打开swagger复制过来

                });
            },
            bind() {  //下拉
                console.log("下拉数据");

                axios({
                    url: 'https://localhost:5001/api/Product/GetTypes',
                    method: 'get',
                    params: {
                        
                    }
                }).then((res) => {
                    //也可以从console.log里面去赋值
                    console.log(res.data);

                    this.types = res.data;  //打开swagger复制过来

                });
            },

        }


    });
</script>
